{% extends 'base.html.twig' %}

{% block title %}
    接口文档 - {{ website_name }}
{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" type="text/css" href="{{ asset('css/document/swagger-ui.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/document/api.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/document/iconfont.css') }}">
    <script type="text/javascript" src="{{ asset('js/document/jquery.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/document/scrollfix.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/document/api.js') }}"></script>
{% endblock %}

{% block body %}

    <div id="swagger-ui">
        <section data-reactroot="" class="swagger-ui swagger-container">
            <div class="topbar">
                <div class="wrapper">
                    <div class="topbar-wrapper">
                        <a style="flex:none;">
                            <img height="40" src="{{ asset(website_logo) }}" alt="Gaoop Studio" style="margin-right: 10px;">{{ website_name }}
                        </a>
                    </div>
                </div>
            </div>
            <div class="swagger-ui">
                <div class="information-container wrapper">
                    <section class="block col-12">
                        <div>
                            <div class="info">
                                <hgroup class="main">
                                    <h2 class="title">
                                        <span class="title" style="font-size: 36px;">
                                            接口文档
                                        </span>
                                        <span>
                                            <small><pre class="version">{{ version }}</pre></small>
                                        </span>
                                    </h2>
                                </hgroup>
                                <div class="description">
                                    <div class="renderedMarkdown"><p>初始项目接口文档</p></div>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
                <div class="scheme-container">
                    <section class="schemes wrapper block col-12">
                        <div>执行 <span style="font-size: 14px"><code>php bin/console task:api-doc</code></span> 生成最新的接口文档</div>
                    </section>
                </div>
            </div>
        </section>
        <section class="document-content">
            <div class="nav">
                <ul>
                    {% if data|length > 0 %}
                        {% for item in data %}
                            <li class="nav-item">
                                <a href="javascript:;">
                                    <i class="iconfont my-icon nav-icon icon-wenjianjia"></i>
                                    <span>{{ item.base_api_name }} <font style="font-size: 12px;color: #888;">{{ item.base_api_description }}</font></span>
                                    <i class="my-icon nav-more"></i>
                                </a>
                                <ul class="sub-item">
                                    {% if item.methods|length > 0 %}
                                        {% for method in item.methods %}
                                            {% if method.api_name is defined %}
                                                <li>
                                                    <a href="javascript:void(0);" onclick="getDoc({{ method|json_encode }})">
                                                        <i class="iconfont my-icon nav-icon icon-wenjian3"></i>
                                                        <span>{{ method.api_name.name }}</span>
                                                    </a>
                                                </li>
                                            {% endif %}
                                        {% endfor %}
                                    {% endif %}
                                </ul>
                            </li>
                        {% endfor %}
                    {% else %}
                        <li class="nav-item">
                            <a href="javascript:;">
                                <i class="iconfont my-icon nav-icon icon-wenjianjia"></i>
                                <span>暂无接口</span>
                            </a>
                        </li>
                    {% endif %}
                </ul>
            </div>
            <div id="document">
                <div class="doc-title">说明</div>
                <div class="doc-summary">点击左侧接口条目查看详细信息。</div>
                <div class="doc-body">
                    <div class="doc-item" style="width: 50%;float: left;">
                        <span class="label">方法：</span>
                        <span class="sub-span action">暂无</span>
                    </div>
                    <div class="doc-item" style="width: 50%;float: left;">
                        <span class="label">权限：</span>
                        <span class="sub-span authority">暂无</span>
                    </div>
                    <div class="doc-item" style="width: 50%;float: left;">
                        <span class="label">方式：</span>
                        <span class="sub-span method">暂无</span>
                    </div>
                    <div class="doc-item" style="width: 50%;float: left;">
                        <span class="label">路径：</span>
                        <span class="sub-span url">暂无</span>
                    </div>
                    <div class="doc-item">
                        <span class="label">描述：</span>
                        <span class="sub-span description">暂无</span>
                    </div>
                    <div class="doc-item">
                        <span class="label">参数：</span>
                        <div class="doc-parameter">
                            <table class="parameter-table">
                                <thead>
                                <tr class="p-tr">
                                    <th width="15%" class="p-th">参数名</th>
                                    <th width="10%" class="p-th">必选</th>
                                    <th width="10%" class="p-th">格式</th>
                                    <th width="30%" class="p-th">说明</th>
                                    <th width="10%" class="p-th">默认值</th>
                                    <th width="25%" class="p-th">示例</th>
                                </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="doc-item">
                        <span class="label">响应：</span>
                        <div class="pretty-content">
                            <span class="sub-span">暂无</span>
                        </div>
                    </div>
                    <div class="doc-item">
                        <span class="label">备注：</span>
                        <div class="remark-content">
                            <span class="sub-span">暂无</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <script>
        function getDoc(data) {
            $('.doc-body').show();
            $('.doc-summary').hide();
            $('.doc-title').html(data.api_name.name);
            $('.doc-item .action').html(data.method_class +'::'+data.method_name+'()');
            $('.doc-item .url').html('<code>' + data.router.path + '</code>');
            let methods = '';
            data.router.method.forEach(function (item, index) {
                methods += item;
            })
            $('.doc-item .method').html('<code>' + methods + '</code>');

            if (data.api_name.description !== null) {
                $('.doc-item .description').html(data.api_name.description);
            } else {
                $('.doc-item .description').html('暂无');
            }
            if (data.api_authority){
                $('.doc-item .authority').html(data.api_authority.need);
            } else {
                $('.doc-item .authority').html('暂无');
            }
            $('.parameter-table tbody').html('');
            if (data.api_params){
                $.each(data.api_params, function (index, item) {
                    let default_value = item.default ? item.default : '';
                    let example_value = item.example ? item.example : '';
                    $('.parameter-table tbody').append('<tr><td>' + item.name + '</td><td>' + item.require + '</td><td>' + item.type + '</td><td>' + item.comment + '</td><td>' + default_value + '</td><td>' + example_value + '</td></tr>')
                })
            }
            if (data.api_response) {
                let jsonObj = JSON.parse(data.api_response);
                $('.pretty-content').html('<pre class="prettyprint">' + JSON.stringify(jsonObj, null, 4) + '</pre>');
            } else {
                $('.pretty-content').html('<span class="sub-span">暂无</span>');
            }
            // if (result.data.remark != '') {
            //     $('.remark-content').html('<pre class="prettyprint">' + result.data.remark + '</pre>');
            // } else {
            //     $('.remark-content').html('<span class="sub-span">暂无</span>');
            // }
        }
    </script>
{% endblock %}